<script setup lang="tsx">
import { ref } from 'vue';

defineOptions({
  name: 'UserSearch'
});

interface Params {
  lots?: string;
  model?: string;
  checkType?: any;
  status?: any;
  date?: any;
}

interface Emits {
  (e: 'reset'): void;
  (e: 'search',model:Params): void;
}

const model = ref<Params>({
  lots: '',
  model: '',
  checkType: null,
  status: null,
  date: null
});

const emit = defineEmits<Emits>();

function search() {
  emit('search', model.value);
}

function reset() {
  model.value = {
    lots: '',
    model: '',
    checkType: '',
    status: '',
    date: null
  };
  emit('reset');
}
</script>

<template>
  <ACard :title="null" :bordered="false" class="search-card card-wrapper">
    <AForm
      ref="formRef"
      :model="model"
      :label-col="{
        span: 5,
        md: 7
      }"
      class="search-form"
    >
      <div class="w-full flex">
        <ARow :gutter="[15, 8]" wrap class="w-full">
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="生产型号" name="model" class="m-0" :label-col="{}">
              <AInput v-model:value="model.model" placeholder="请输入生产型号" class="min-form-control" />
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="lot号" name="lot" class="m-0" :label-col="{}">
              <AInput v-model:value="model.lots" placeholder="请输入lot号" class="min-form-control" />
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="检验类型" name="checkType" class="m-0" :label-col="{}">
              <ASelect v-model:value="model.checkType" placeholder="请输入检验类型" class="min-form-control">
                <ASelectOption value="1">首检</ASelectOption>
                <ASelectOption value="2">巡检</ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
            <AFormItem label="审核状态" name="lot" class="m-0" :label-col="{}">
              <ASelect v-model:value="model.status" placeholder="请选择检验类型" class="min-form-control">
                <ASelectOption value="1">待审核</ASelectOption>
                <ASelectOption value="2">待修改</ASelectOption>
                <ASelectOption value="3">待主管审核</ASelectOption>
                <ASelectOption value="4">审批完成</ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="5">
            <AFormItem label="日期" name="lot" class="m-0" :label-col="{}">
              <ARangePicker v-model:value="model.date" show-time class="min-form-control" />
            </AFormItem>
          </ACol>
          <div class="flex-1">
            <AFormItem class="m-0">
              <div class="w-full flex-y-center justify-end gap-12px">
                <AButton type="primary" ghost class="mini-btn" @click="search">
                  <template #icon>
                    <icon-ic-round-search class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.search') }}</span>
                </AButton>
                <AButton class="mini-btn" @click="reset">
                  <template #icon>
                    <icon-ic-round-refresh class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.reset') }}</span>
                </AButton>
              </div>
            </AFormItem>
          </div>
        </ARow>
      </div>
    </AForm>
  </ACard>
</template>

<style lang="scss" scoped>
.search-card {
  :deep(.ant-card-body) {
    padding: 5px 25px;
  }
  .search-form {
    :deep(.ant-form-item-label) {
      width: auto !important;
    }
  }
}
</style>
